<template>
   <view class="container">
        <view class="header">
            <view class="list">
                <view class="left">
                    <view class="title">欢迎使用</view>
                    <view class="small-title">防伪查询小程序</view>
                </view>

                <view class="right" @click="ToBusiness">
                    <image
                        src="/static/images/user-circle.png"
                    />
					{{ JSON.stringify(business) !== '{}' ? '我的' : '登陆' }}
                </view>
            </view>

            <view class="validate-input">
                <u-input
                    :placeholder="placeholderText" v-model="code"
                >
                    <!-- #ifndef H5 -->
                        <template slot="suffix">
                            <u-icon size="28" name="scan" @click="onScanCode"></u-icon>
                        </template>
                    <!-- #endif -->
                </u-input>
            </view>
        </view>

        <view class="validate">
            <u-button :customStyle="validateBtn" :plain="true" text="开始验证" @click="onValidate"></u-button>
        </view>
		<!-- 信息提示 -->
		<u-toast ref="uToast"></u-toast>
   </view>
</template>

<script>
export default {
    data() {
        return {
            // #ifndef H5
            placeholderText:'请输入防伪码或者扫防伪码',
            // #endif
            // #ifdef H5
            placeholderText:'请输入防伪码',
            // #endif
            validateBtn:{
                width:'100%',
                height:'100%',
                background: 'transparent',
                color:'#fff'
            },
			business: {},
			code: ''
        }
    },
	onShow(){
		this.business =  uni.getStorageSync('business') ? uni.getStorageSync('business') : {};
	},
    methods: {
        onScanCode()
        {
            uni.scanCode({
                success:(res) => {
					let path = res.path ? res.path : ''
					if(!path)
					{
						this.$refs.uToast.show({
							type: 'error',
							message: '防伪码不能为空'
						})
					}
					uni.navigateTo({
						url: path
					});
                }
            })
        },
        onValidate()
        {
			if (!this.code) {
				this.$refs.uToast.show({
					message: '授权码为空无法查询',
					type: 'error',
				})
				return false;
			}
			
			uni.$u.route({
				url: 'pages/validate/info',
				params: {
					code: this.code
				}
			})
        },
        ToBusiness()
        {
            this.$u.route('pages/business/index');
        }
    },
}
</script>

<style>
.header{
    height: 90vw;
    background: linear-gradient(to right, #33ccff 0%, #91cbf8 100%);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 10vh;
}

.header .list{
    color: #fff;
    display: flex;
    justify-content: space-between;
}

.header .list .left{
    margin-left: 20px;
}

.header .list .left .title{
    margin-bottom: 10px;
}

.header .list .right{
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 0 5px 0 10px;
    color: #469eff;
    font-size: 12px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    height: 35px;
}

.header .list .right image{
    width:20px;
    height: 20px;
    margin-right: 10px;
}

.header .validate-input{
    width: 80%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20vw;
}

.validate{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: #2879fc;
    margin: 0 auto;
    margin-top: -50px;
    box-shadow: 0px 0px 10px 10px #eee;
}
</style>